<template>
  <div id="container">
    <!-- 背景 -->
    <div class="full-bg">
      <div class="bg-cover"></div>
      <!-- 模糊 -->
      <div class="glass" :style="{ backdropFilter: BgBlur }"></div>
    </div>
    <!-- 去我的博客 -->
    <!-- <go-my-blog /> -->
    <!-- 搜索 -->
    <div class="search" @mouseover="changeBgStyle" @mouseout="resetBgStyle">
      <form :action="defaultAttr.url" method="get" target="_blank">
        <chioce-engine @changeEngie="changeEngie" />
        <input
          type="text"
          v-model.trim="keyword"
          :placeholder="placeTip"
          :name="defaultAttr.name"
          clearable
          autofocus
          autocomplete="off"
          @keyup.self.stop="toTip"
          @click="removePlaceTip"
        />
      </form>
    </div>
    <!-- 提示 -->
    <div class="tips" :style="{ opacity: isShow, backdropFilter: tipBlur }">
      <p v-for="item in tipsList" :key="item.sa" @click="toEnginePage(item.q)">
        {{ item.q }}
      </p>
    </div>
  </div>
</template>

<script>
import { getBaiduTip } from '@/api/index'
import ChioceEngine from '@/components/chioce_engine.vue'
// import GoMyBlog from '@/components/go_my_blog.vue'
export default {
  components: {
    ChioceEngine,
    // GoMyBlog,
  },
  data() {
    return {
      keyword: '',
      //  背景模糊程度
      BgBlur: 'blur(0)',
      //   搜索提示模糊程度
      tipBlur: 'blur(0)',
      //   输入框提示
      placeTip: '搜索',
      //   计时器
      timer: null,

      //   显示搜索提示
      isShow: 0,
      //   form默认的action和input的name
      defaultAttr: {
        name: 'q',
        url: 'https://cn.bing.com/search',
        type: 'bing',
      },
      //   搜索引擎列表
      actionUrl: [
        {
          name: 'q',
          url: 'https://cn.bing.com/search',
          type: 'bing',
        },
        {
          name: 'wd',
          url: 'https://www.baidu.com/s',
          type: 'baidu',
        },
        {
          name: 'q',
          url: ' https://www.google.com/search',
          type: 'google',
        },
      ],
      //   提示消息列表
      tipsList: [],
    }
  },
  computed: {},
  methods: {
    changeBgStyle() {
      this.BgBlur = 'blur(3px)'
    },
    resetBgStyle() {
      this.BgBlur = 'blur(0)'
      this.placeTip = '搜索'
    },
    removePlaceTip() {
      this.placeTip = ''
    },
    toTip() {
      /** 这里的搜索提示全部使用百度的api, 在点击提示前往搜索的时,判断引擎类型进行跳转 */
      clearTimeout(this.timer)
      /////////////////////////////////////////////////////
      // ** 无后端, 生产环境无法解决跨域 ,所以不使用
      //   this.timer = setTimeout(async () => {
      //     if (this.keyword === '') {
      //       clearTimeout(this.timer)
      //       this.isShow = 0
      //       this.tipBlur = 0
      //       return
      //     }
      //     const { data: res } = await getBaiduTip({
      //       ie: 'utf-8',
      //       json: 1,
      //       prod: 'pc',
      //       wd: this.keyword,
      //     })
      //     this.tipsList = res.g
      //     this.isShow = 1
      //     this.tipBlur = 'blur(7px)'
      //   }, 700)
      ///////////////////////////////////////////////////
      /** 使用jsonp */
      this.timer = setTimeout(async () => {
        if (this.keyword === '') {
          clearTimeout(this.timer)
          this.isShow = 0
          this.tipBlur = 0
          this.tipsList = []
          return
        }
        const res = await getBaiduTip({
          ie: 'utf-8',
          json: 1,
          prod: 'pc',
          wd: this.keyword,
        })
        this.tipsList = res.g
        this.isShow = 1
        this.tipBlur = 'blur(7px)'
      }, 700)
    },

    // 改变搜索引擎
    changeEngie(index) {
      this.defaultAttr = this.actionUrl[index]
    },
    // 判断搜索引擎类型进行跳转
    toEnginePage(value) {
      switch (this.defaultAttr.type) {
        case 'baidu':
          // 目前我只知道这个方法可以打开新页面,浏览器可能会拦截
          window.open('https://www.baidu.com/s?wd=' + value)
          break
        case 'google':
          this.tipsList = [{ q: '抱歉,暂时无法使用谷歌服务~~' }]
          console.log('抱歉,暂时无法使用谷歌服务~~')
          break
        default:
          window.open('https://cn.bing.com/search?q=' + value)
          break
      }
    },
  },
  created() {
    console.log(
      [
        '                   _ooOoo_',
        '                  o8888888o',
        '                  88" . "88',
        '                  (| -_- |)',
        '                  O\\  =  /O',
        "               ____/`---'\\____",
        "             .'  \\\\|     |//  `.",
        '            /  \\\\|||  :  |||//  \\',
        '           /  _||||| -:- |||||-  \\',
        '           |   | \\\\\\  -  /// |   |',
        "           | \\_|  ''\\---/''  |   |",
        '           \\  .-\\__  `-`  ___/-. /',
        "         ___`. .'  /--.--\\  `. . __",
        '      ."" \'<  `.___\\_<|>_/___.\'  >\'"".',
        '     | | :  `- \\`.;`\\ _ /`;.`/ - ` : | |',
        '     \\  \\ `-.   \\_ __\\ /__ _/   .-` /  /',
        "======`-.____`-.___\\_____/___.-`____.-'======",
        "                   `=---='",
        '^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^',
        '         佛祖保佑       永无BUG',
      ].join('\n')
    )
    console.log('\n技术栈：基于 VUE.js + Axios + 手撸\n')
    console.log('\n核心：个人起始页\n')
    console.log('\n建立时间：2021年9月至今\n')
    console.log('项目地址: https://gitee.com/KYALEX/SLM-INDEX')
    console.log('我的博客: http://akexc.com')
  },
}
</script>

<style lang="less" scoped>
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.full-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -999;
  .bg-cover {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.jpg') no-repeat center center/cover;
    filter: brightness(60%);
    -webkit-filter: brightness(60%);
    z-index: inherit;
  }
  .glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.2s;
  }
}
.search {
  width: 32vw;
  form {
    position: relative;
  }
  input {
    padding: 15px 10px;
    background: #00000070;
    width: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    outline: none;
    border: none;
    border-radius: 16vw;
    &::placeholder {
      color: #fff;
    }
  }
}
.tips {
  margin-top: 10px;
  color: #fff;
  border-radius: 15px;
  min-height: 300px;
  width: 30vw;
  p {
    user-select: none;
    height: 30px;
    line-height: 30px;
    padding-right: 10px;
    text-indent: 20px;
    cursor: pointer;
    transition: 0.1s;
    text-align: left;
    &:hover {
      background: #00000020;
      text-indent: 30px;
    }
  }
}

/*phone<768  小屏，字体黑色，背景蓝色*/
@media screen and (max-width: 1199px) and (min-width: 481px) {
  .search {
    width: 60%;
  }
  .tips {
    width: 50%;
  }
}
/* 超小屏，字体黑色，背景蓝色*/
@media screen and (max-width: 480px) {
  .search {
    margin-top: 170px;
    width: 80%;
    input {
      text-align: left;
      text-indent: 34px;
    }
  }
  .tips {
    min-height: 180px;
    max-height: 180px;
    width: 70%;
    overflow: hidden;
  }
}
</style>
